import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';
import { Demo6Component } from './demo6/demo6.component';
import { CardComponent } from './card/card.component';
import { Demo8Component } from './demo8/demo8.component';
import { Demo9Component } from './demo9/demo9.component';
import { CardCheckAllComponent } from './card-check-all/card-check-all.component';

export const CheckboxConfig = {
  location: 'Checkbox',
  description: `页面中提供多个枚举选项，供用户进行复选时使用。提供原生的复选框样式、选择按钮和自定义选项样式。
  结合 Group 组件，可对复选组进行横向、纵向自由排列，自定义间隔、列数等。`,
  description_en: `Multiple enumeration options are provided in the page for users to check. Native check box styles, selection button and custom selection are provided.
	Combined with the Group component, user can arrange the check groups horizontally and vertically freely, and customise the interval, number of columns, etc.`,
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/checkbox/demo1/demo1.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription: '基础的 checkbox 使用。',
      demoDescription_en: 'Basic use of checkbox.',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/checkbox/demo2/demo2.component',
      demoTitle: '状态控制',
      demoTitle_en: 'Status Control',
      demoDescription: '状态由外部完全控制。',
      demoDescription_en: 'The status is fully controlled by the outside.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/checkbox/demo3/demo3.component',
      demoTitle: '复选框组',
      demoTitle_en: 'Checkbox Group',
      demoDescription: '提供复选框组功能，结合 Group 组件搭配使用，灵活布局，适配各种场景。',
      demoDescription_en:
        'It provides features of checkbox group, which can be used in combination with Group component to make flexible layout and adapt to various scenes.',
    },
    //  已跟规范对齐，暂无使用场景，故不展示
    // {
    //   demo: Demo4Component,
    //   codePath: 'showcase/checkbox/demo4/demo4.component',
    //   demoTitle: '选择按钮-按钮型',
    //   demoDescription: '选择按钮样式风格的有边框复选组。',
    //   demoTitle_en: 'SelectButton (Button)',
    //   demoDescription_en: 'SelectButton for button shape.'
    // },
    // {
    //   demo: Demo5Component,
    //   codePath: 'showcase/checkbox/demo5/demo5.component',
    //   demoTitle: '选择按钮-链接型',
    //   demoDescription: '选择按钮样式风格的无边框复选组。',
    //   demoTitle_en: 'SelectButton (Link)',
    //   demoDescription_en: 'SelectButton for link shape.'
    // },
    // {
    //   demo: Demo6Component,
    //   codePath: 'showcase/checkbox/demo6/demo6.component',
    //   demoTitle: '自定义1',
    //   demoDescription: '自定义选项的风格样式，多用于卡片式复选，整个区域可选,多用于卡片式复选。',
    //   demoTitle_en: 'Custom Style1',
    //   demoDescription_en: 'The style of user-defined options is mostly used for card check, the whole area can be selected. Most are used for card check.'
    // },
    {
      demo: CardComponent,
      codePath: 'showcase/checkbox/card/card.component',
      demoTitle: '卡片式复选',
      demoTitle_en: 'Custom card',
      demoDescription: '自定义选项的风格样式，多用于卡片式复选，点击卡片内的任何位置都可以触发选中。',
      demoDescription_en:
        'The style of user-defined options is mostly used for card check. Click any position in the card to trigger the selection.',
    },
    {
      demo: Demo9Component,
      codePath: 'showcase/checkbox/demo9/demo9.component',
      demoTitle: '全选',
      demoDescription: '全选逻辑配置。可通过 lvIgnoreDisabled 配置禁用选项对全选状态的影响',
      demoTitle_en: 'Check ALL',
      demoDescription_en: `Select all logical configurations. The impact of disabled options on the selected status can be configured by lvIgnoreDisabled.`,
    },
    {
      demo: CardCheckAllComponent,
      codePath: 'showcase/checkbox/card-check-all/card-check-all.component',
      demoTitle: '全选风格自定义',
      demoDescription: '全选风格自定义。',
      demoTitle_en: 'Check ALL Style Customize ',
      demoDescription_en: `Check ALL Style Customize.`,
    },
    {
      demo: Demo8Component,
      codePath: 'showcase/checkbox/demo8/demo8.component',
      demoTitle: '全选逻辑自定义',
      demoDescription: '全选逻辑自定义。',
      demoTitle_en: 'Check ALL logic Customize',
      demoDescription_en: 'Check ALL logic Customize.',
    },
  ],
  useRule: [],
  useSuggestion: [],
  mApi: [
    {
      selector: 'lv-checkbox',
      snippet: `<label lv-checkbox [(ngModel)]='\${1:open}'>\${2: Checkbox}</label>`,
      name: 'lv-checkbox',
      name_en: 'lv-checkbox',
      api: [
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '是否禁用复选框。',
          description_en: 'Whether to disable checkbox.',
        },
        {
          attribute: 'lvIndeterminate',
          type: 'boolean',
          default: 'false',
          description: '半选状态。',
          description_en: 'Half checked.',
        },
        {
          attribute: 'lvViewType',
          isAttrAbandon: true,
          type: 'string',
          default: 'default',
          description: `复选框的视图类型 ( 'default' | 'button' | 'link' | 'custom' ), 当设置为 'custom' 时，需要自定义视图。`,
          description_en: `View types of checkbox ( 'default' | 'button' | 'link' | 'custom' ). View is required to be customised when it it set to custom.`,
        },
        {
          attribute: 'lvButtonSize',
          type: 'string',
          default: 'default',
          description: `该属性只在 lvViewType 为 button 和 link 时生效，设置选择按钮的大小 ( 'default' | 'small' )。`,
          description_en: `This property only takes affect when lvViewType is button and link. Set the size of check button ( 'default' | 'small' ).`,
        },
        {
          attribute: 'ngModel',
          type: 'boolean',
          default: 'false',
          description: '复选框是否选中，可双向绑定。',
          description_en: 'Whether the checkbox is selected. Two-way binding is allowed.',
        },
        {
          attribute: 'lvValue',
          type: 'string',
          default: 'null',
          description: '复选框的唯一标识，仅在 lv-checkbox-group 中配合使用，用以标识复选框组中的选中项。',
          description_en:
            'Unique identification of the check box. It can only be used coordinated with lv-checkbox-group to indintify the selected items in the checkbox group.',
        },
        {
          attribute: 'lvControl',
          type: 'boolean',
          default: 'false',
          description:
            '状态完全控制，设置为 true 时，状态由外部完全控制，在状态切换时可实现异步/同步的事件处理。注：此时 ngModel 属性的双向绑定无效，只能作为输入属性使用。',
          description_en:
            'Full control state. When it is set to true, the state is fully controlled by the external, and asynchronous / synchronous event processing can be realized when state switching. Note: two-way binding of ngmodel property is invalid and can only be used as an input property.',
        },
      ],
      event: [
        {
          event: 'ngModelChange',
          parameter: `value`,
          description: '选择状态变化时的回调函数。参数为复选框的状态 (boolean: true | false)。',
          description_en: 'Select the callback function when state changes. Parameter is the state of the checkbox (boolean: true | false)',
        },
      ],
    },
    {
      selector: 'lv-checkbox-group',
      snippet: `
        <lv-checkbox-group [(ngModel)]="\${1:selected}">
          <lv-group  [lvGutter]="'16px'">
            <lv-checkbox [lvValue]="\${2:'item001'}">\${3:Item 001}</lv-checkbox>
            <lv-checkbox [lvValue]="\${4:'item002'}">\${5:Item 002}</lv-checkbox>
          </lv-group>
        </lv-checkbox-group>
			`,
      name: 'lv-checkbox-group',
      name_en: 'lv-checkbox-group',
      api: [
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '是否禁用组下的所有复选框。',
          description_en: 'Whether to disable all checkbox under the group.',
        },
        {
          attribute: 'lvIgnoreDisabled',
          type: 'boolean',
          default: 'true',
          description: '设置全选状态时是否排除已禁用项。',
          description_en: 'Whether to exclude disabled items when check-all status change.',
        },
        {
          attribute: 'ngModel',
          type: 'Array<value: string>',
          default: '[ ]',
          description: '复选框组的已选中项，可双向绑定。',
          description_en: 'Checked items in the checkbox group. Two-way binding is allowed.',
        },
      ],
      event: [
        {
          event: 'ngModelChange',
          parameter: `Array<value: string>`,
          description: '复选框组的选择状态变化时的回调函数。参数为复选框组的已选中项数组。',
          description_en:
            'Callback function when selection state of the checkbox group changes. Parameter is an array of selected items for the checkbox group.',
        },
      ],
    },
    {
      selector: 'lv-checkbox-all',
      snippet: `<lv-checkbox-all></lv-checkbox-all>`,
      name: 'lv-checkbox-all',
      name_en: 'lv-checkbox-all',
      api: [
        {
          attribute: 'lvIgnoreDisabled',
          type: 'boolean',
          default: 'true',
          description: '设置全选状态时是否排除已禁用项。',
          description_en: 'Whether to exclude disabled items when check-all status change.',
        },
      ],
      event: [
        {
          event: 'lvCheckAllStatusChange',
          parameter: `0 | 1 | 2`,
          description: '全选状态改变时的回调函数。参数：0 未选中，1 全选中，2 部分选中。',
          description_en:
            'Callback function when the status of all selection changes. The options are as follows: 0: unselected; 1: all selected; 2: partial selected.',
        },
      ],
    },
  ],
};
